<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 

		<title></title>
		
		<style>
			.img-responseive {
				display:inline-block;
				height: auto;
				max-width: 100px;
			}
			
			@link-color({color:red;})
		</style>
	</head>
	<body>
		<img src="img/3.jpg" class="img-responseive" alt="ha" />
		<div class="container">
			<div class="row">
				<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
					中华人民共和国成立啦中华人民共和国成立啦中华人民共和国成立啦中华人民共和国成立啦中华人民共和国成立啦
					<a href="">hello</a>
					啊哈哈<mark>标记</mark>哈哈
					<del>你被删除了</del>
					<s>无用文本</s>
					<ins>一点点</ins>
					<u>带下划线的</u>
					<small>小号文字</small>
					<em>斜体</em>
					
					<p class="text-left">文字左对齐</p>
					<p class="text-right">文字右对齐</p>
					<p class="text-center">文字居中对齐</p>
					<p class="text-justify">这个不知道什么对齐</p>
					<p class="text-nowrap">这个不知道什么对齐</p>
					
					
					<p class="text-lowercase">Hello world 全小写</p>
					<p class="text-uppercase">Hello world 全大写</p>
					<p class="text-capitalize">Hello world 首字母大写</p>
					
					<abbr title="缩略语mmmmmmmmmmmmmmmmm">Attr</abbr>
					
					<abbr title="缩略语sssssssssssssssss" class="initialiam">Attr</abbr>
					
					<address>
						<strong>各走一边</strong><br>
						大路朝天
					</address>
					
					<blockquote class="blockquote-reverse">
						<p>我们不拿人民群众一针一线</p>
						<footer>毛主席 <cite title="嗯 就是这样的">在路上</cite></footer>
					</blockquote>
					
					<!-- 不要黑点 -->
					<ul class="list-unstyled">
						<li>
							无序的1111111111111111
						</li>
						<li>
							无序的2222222222222222
						</li>
					</ul>
					<!--  list-inline 这个不知道干什么用的  -->
					<ol>
						<li>
							有序的2222222222222222
						</li>
						<li>
							有序的2222222222222222
						</li>
					</ol>
					<dl class="dl-horizontal">
						<dt>描述</dt>
						<dd>描述2</dd>
					</dl>
					<dl class="text-overflow">
						<dt>描述</dt>
						<dd>描述2</dd>
					</dl>
					
					内联代码<code>内联代码</code>内联代码
					
					用户输入<kbd>insert</kbd>命令
					
					<pre>&lt;p&gt;system.out.print("hello")&lt;p&gt; 代码块</pre>
					
					变量：<var>y</var>=<var>x</var>+<var>z</var>
					<samp>程序输入</samp>
					
					<!-- 斑马条纹 -->
					<table class="table table-striped">
						<tr>
							<td>1</td>
							<td>2</td>
						</tr>
						<tr>
							<td>1</td>
							<td>2</td>
						</tr>
						<tr>
							<td>1</td>
							<td>2</td>
						</tr>
					</table>
					
					<!-- 带边框的 -->
					<table class="table table-bordered">
						<tr class="active">
							<td>1</td>
							<td>2</td>
						</tr>
						<tr class="success">
							<td>1</td>
							<td>2</td>
						</tr>
						<tr class="info">
							<td>1</td>
							<td>2</td>
						</tr>
						
						<tr class="danger">
							<td>1</td>
							<td>2</td>
						</tr>
						
						<tr class="warning">
							<td>1</td>
							<td>2</td>
						</tr>
					</table>
					
					<!-- 鼠标悬停 -->
					<table class="table table-hover">
						<tr>
							<td>1</td>
							<td>2</td>
						</tr>
						<tr>
							<td>1</td>
							<td>2</td>
						</tr>
						<tr>
							<td>1</td>
							<td>2</td>
						</tr>
					</table>
					
					<!-- 紧缩表格 -->
					<table class="table">
						<tr class="active">
							<td>1</td>
							<td>2</td>
						</tr>
						<tr class="success">
							<td>1</td>
							<td>2</td>
						</tr>
						<tr class="info">
							<td>1</td>
							<td>2</td>
						</tr>
						
						<tr class="danger">
							<td>1</td>
							<td>2</td>
						</tr>
						
						<tr class="warning">
							<td>1</td>
							<td>2</td>
						</tr>
						
					</table>
					<!-- 响应式布局  水平滚动-->
					<div class="table-responsive">
						<table class="table">
							<tr>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
							</tr>	
							<tr>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
								<td>
									hello
								</td>
							</tr>	
						</table>
					</div>
					
					<div>
						
						<form class="">
							<div class="form-group">
								<lable for="mail">Email address</lable>							
								<input id ="mail" type="email" class="form-control" placeholder="email"/>
							</div>
							<div class="form-group">
								<label for="pass">password</label>
								<input id="pass" type="password" class="form-control" placeholder="pass"/>
							</div>
							<div class="checkbox">
								<label for="file">file</label>
								<input id="file" type="file"/>
								<p class="help-block">help me</p>
							</div>
							
							<div class="form-group">
								<label for ="chckbox"><input type="checkbox"  />勾选</label>
							</div>
							
							<button type="submit" class="btn btn-defualt">提交</button>
						</form>
					</div>
					<!-- form-inline 标签同一行 -->
					<div>
						<form class="form-inline">
							<div class="form-group">
								<label for="name">name</label>
								<input type="text" class="form-control" id="name" />
							</div>
							<div class="form-group">
								<label for="sex">性别</label>
								<input type="text" id="sex" />
							</div>
							<div class="checkbox">
								<label><input type="checkbox" />remember me</label>
							</div>
							
							<button class="btn btn-defualt">提交</button>
						</form>
					</div>
					<!--  -->
					<div>
						<form class="form-inline">
							<div class="form-group">
								<label class="sr-only" for="amount">amount</label>
								<div class="form-group">
									<div class="form-group-addon">$</div>
									<input type="text" id="amount" class="form-control" />
									<div class="form-group-addon">.00</div>
								</div>
							</div>
							<button type="submit" class="btn btn-primary">校验</button>
						</form>
					</div>
					
					<!-- 一些表单的操作 -->
					<div>
						<form class="form-horizontal">
							<div class="form-group">
								<lable for="email2" class="col-sm-2 col-xs-2 control-labe">email</lable>
								<div class="col-sm-setoff-2 col-sx-setoff-2 col-sm-10 col-xs-10">
									<input type="email" class="form-control" id="email2"  />
								</div>
							</div>
							<div class="form-group">
								<lable for="pass2" class="col-sm-2 col-xs-2 control-labe">pass</lable>
								<div class="col-sm-setoff-2 col-sx-setoff-2  col-sm-10 col-xs-10">
									<input type="password" class="form-control" id="pass2"/>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-setoff-2 col-sm-10">
									<div class="checkbox">
										<label for="checkbox2">
											<input id="checkbox2" type="checkbox" />勾选
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-setoff-2 col-sm-10">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
					
					<div>
						<input type="datetime" class="form-control" />
						<input type="datetime-local" class="form-control" />
						<input type="date" class="form-control" />
						<input type="month" class="form-control" />
						<input type="time" class="form-control" />
						<input type="week" class="form-control" />
						<input type="number" class="form-control" />
						<input type="url" class="form-control" />
						<input type="search" class="form-control" />
						<input type="tel" class="form-control" />
						<input type="color" />
						<textarea class="form-control" rows="3"></textarea>
					</div>
					
					<div class="checkbox">
						<label>
							<input type="checkbox" />H1
						</label>
					</div>
					<div class="checkbox disabled">
						<label>
							<input type="checkbox" disabled/>H1
						</label>
					</div>
					
					
					<div class="radio">
						<label>
							<input type="radio" name="radio1" />
						</label>
						
					</div>
					<div class="radio">
						<label>
							<input type="radio" name="radio1" />
						</label>
						
					</div>
					<div class="radio disabled">
						<label>
							<input type="radio" name="radio1" disabled=""/>
						</label>
					</div>
					
					<div>
						<label class="checkbox-inline">
							<input type="checkbox" name="" id="" value="1" />1
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" name="" id="" value="" />2
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" name="" id="" value="" disabled=""/>3
						</label>
						
						<label class="radio-inline">
							<input type="radio" name="radio2" id="" value="1" />1
						</label>
						<label class="radio-inline">
							<input type="radio" name="radio2" id="" value="" />2
						</label>
						<label class="aria-lable">
							<input type="radio" name="radio2" id="" value="" disabled=""/>3
						</label>
					</div>
					
					<!-- 下拉框 -->
					<div>
						<select class="form-control">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
						</select>
						
						<select multiple class="form-control">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
						</select>
					</div>
					
					<div>
						<form class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2 control-label">email</label>
								<div class="col-sm-1">
									<p class="form-control-static">hello</p>
								</div>
							</div>
						</form>
					</div>
					
					<div >
						<input class="form-control" focus="box-shadow"/>
					</div>
					
					<!-- 全部设置为只读 -->
					<div>
						<form>
							<fieldset disabled="">
								<input type="text" />
								<input type="checkbox" />
								
							</fieldset>
						</form>
					</div>
					
					<!-- help text -->
					<div>
						<label class="sr-only" for="block">block</label>
						<input type="text" id="block" class="form-control" aria-describedby="helpBlock" />
						<span id="helpBlock" class="help-block">啊哈哈啊哈哈</span>
					</div>
					
					<!-- 3.0特有 -->
					<div>
						<form>
							<div class="form-group has-success">
								<lable class="control-label" for="tText1">t1</lable>
								<input id="tText1" type="text" class="form-control" aria-describedby="tText1Help" />
								<span id="tText1Help">t1 help</span>
							</div>
						</form>
						<input type="text" class="form-control" />
						<input type="text" class="form-control" />
						<input type="text" class="form-control" />
					</div>
					
					<div>
						<button class="btn btn-primary btn-lg">你好大按钮</button>
						<button class="btn btn-default btn-lg">你好大按钮</button>
						<br>
						<button class="btn btn-primary">你好默认按钮</button>
						<button class="btn btn-default">你好默认按钮</button>
						<br>
						<button class="btn btn-primary btn-sm">你好小按钮</button>
						<button class="btn btn-default btn-sm">你好小按钮</button>
						
						<!-- 4.0 中无效-->
						<br>
						<button class="btn btn-primary btn-xs">你好超小按钮</button>
						<button class="btn btn-default btn-xs">你好超小按钮</button>
						
						<br>
						<button class="btn btn-primary btn-lg btn-block">你好块按钮</button>
						<button class="btn btn-default btn-lg btn-block">你好块按钮</button>
						<!--
                        	作者：hq15221892410@163.com
                        	时间：2017-12-11
                        	描述：disabled
                        -->
						<br>
						<button class="btn btn-primary active" disabled="disabled">你好活的按钮</button>
					</div>
					
					<div>
						<a class="btn btn-primary btn-lg active" role="button" href="">点啊点啊</a>
						<a class="btn btn-default btn-lg active" role="button" href="">点啊点啊</a>
					</div>
					
					<!--  -->
					<div>
						<img class="img-responseive" src="img/3.jpg">
					</div>
					
					<div>
						<!--
                        	作者：hq15221892410@163.com
                        	时间：2017-12-11
                        	描述：圆角的
                        -->
						<img class="img-rounded"  src="img/3.jpg" alt="...">
						<!--
                        	作者：hq15221892410@163.com
                        	时间：2017-12-11
                        	描述：4.0无效 理论上是圆的
                        -->
						<img class="img-circle"  src="img/3.jpg" alt="...">
						<!--
                        	作者：hq15221892410@163.com
                        	时间：2017-12-11
                        	描述：带边框圆角的
                        -->
						<img class="img-thumbnail"  src="img/3.jpg" alt="...">
					</div>
					
					<div>
						<p class="text-muted">ttttttttttttttttttttt</p>
						<p class="text-primary">ttttttttttttttttttttt</p>
						<p class="text-success">ttttttttttttttttttttt</p>
						<p class="text-info">ttttttttttttttttttttt</p>
						<p class="text-warning">ttttttttttttttttttttt</p>
						<p class="text-danger">ttttttttttttttttttttt</p>
					</div>
					
					<!-- 一个X -->
					<div>
						<button type="button" class="close" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						
						
					</div>
					
					<!--
                    	作者：hq15221892410@163.com
                    	时间：2017-12-11
                    	描述：据说是倒三角符号 4.0无效 
                    -->
                    <div>
                    	<span class="caret"></span>
                    </div>
                    
                    <div>
                    	<div class="pull-left">
                    		你好
                    	</div>
                    	<div class="pull-right">
                    		你好
                    	</div>
                    	<div class="center-block">
                    		你好
                    	</div>
                    	<div class="clearfix">
                    		你好
                    	</div>
                    	<div class="show">
                    		你好
                    	</div>
                    	<div class="hidden">
                    		你好
                    	</div>
                    </div>
                    
                    <!--
                    	作者：hq15221892410@163.com
                    	时间：2017-12-11
                    	描述： 屏幕阅读器
                    -->
                    <div>
                    	<a class="sr-only sr-only-focusable" ref="#content">啥玩意</a>
                    </div>
                    
                    <div>
                    	<h1 class="text-hide">你好啊</h1>
                    </div>
                    
                    <div>
                    	<button class="btn">你好</button>
                    </div>
				</div>
			</div>
		</div>
		<!-- 4.0  fluid 覆盖整个宽度 否则居中 大概80%的样子-->
		<div class="container-fluid">
			<div class="">
				dsfsfs	
			</div>
			
		</div>
		<!--
        	作者：hq15221892410@163.com
        	时间：2017-12-11
        	描述：等分一行
        -->
		<div class="container">
			<div class="row">
				<div class="col">
					内容内容内容内容内容内容内容内容内容内容内容内容内容内容
				</div>
				<div class="col">
					内容内容内容内容内容内容内容内容内容内容
				</div>
				<div class="col">
					内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
				</div>
			</div>
		</div>
		
		<!--
        	作者：hq15221892410@163.com
        	时间：2017-12-11
        	描述：多行互不影响等分
        -->
		<div class="container">
			<div class="row">
				<div class="col">
					内容内容内容内容
				</div>
				<div class="col">
					内容内容内容内
				</div>
				<div class="col">
					内容内容
				</div>
			</div>
			
			<div class="row">
				<div class="col">
					内容内容
				</div>
				<div class="col">
					内容内容
				</div>
			</div>
		</div>
		
		<!--
        	作者：hq15221892410@163.com
        	时间：2017-12-11
        	描述：中间w-100 分割
        -->
		<div class="container">
			<div class="row">
				<div class="col">
					很慌
				</div>
				<div class="col">
					很慌很慌
				</div>
				<div class="w-100">
					很慌很慌很慌
				</div>
				<div class="col">
					很慌
				</div>
				<div class="col">
					很慌很慌很慌很慌很慌
				</div>
			</div>
		</div>
		
		<!--
        	作者：hq15221892410@163.com
        	时间：2017-12-11
        	描述： 动态表格宽度
        -->
		<div class="container">
			<div class="row justify-content-md-center">
				<div class="col col-lg-2">
					1 of 3
				</div>
				<div class="col col-md-auto">
					1 of 2
				</div>
				<div class="col col-lg-2">
					1 of 4
				</div>
			</div>
			
			<!--
            	作者：hq15221892410@163.com
            	时间：2017-12-11
            	描述：动态表格
            -->
			<div class="row">
				<div class="col">
					1 of 3 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
				</div>
				<div class="col col-md-auto">
					1 of 2
				</div>
				<div class="col col-lg-2">
					1 of 4
				</div>
			</div>
			
			<div class="row">
				<div class="col">col</div>				
			</div>
			
			<!--
            	作者：hq15221892410@163.com
            	时间：2017-12-11
            	描述：对齐
            -->
			<div class="row align-items-start">
				<div class="col">
					col
				</div>
				<div class="col">
					col
				</div>
				<div class="col">
					col
				</div>
			</div>
			<div class="row align-items-center">
				<div class="col">
					col2
				</div>
				<div class="col">
					col2
				</div>
				<div class="col">
					col2
				</div>
			</div>
			<div class="row align-items-end">
				<div class="col">
					col3
				</div>
				<div class="col">
					col3
				</div>
				<div class="col">
					col3
				</div>
			</div>
		</div>
		
		<!--
        	作者：hq15221892410@163.com
        	时间：2017-12-11
        	描述：说是楼梯效果 但是没生效
        -->
		<div class="container">
			<div class="row">
				<div class="col align-self-start">
					好的好
				</div>
				<div class="col align-self-center">
					好的好的
				</div>
				<div class="col align-self-end">
					好的好的
				</div>
			</div>
		</div>
		
		<!--
        	作者：hq15221892410@163.com
        	时间：2017-12-11
        	描述：图片
        -->
        <div class="container">
        	<div class="media">
        		<img class="mr-3" src="" alt="哈哈"/>
        		<div class="media-body">
        			<h5 class="mt-0">media</h5>
        			hehe
        			
        			<div class="media mt-3">
        				<a href="#" class="pr-3">
        					<img src="" alt="哈哈哈哈" />
        				</a>
        			</div>
        			<div class="media-body">
        				<h5 class="mt-0">
        					heheda
        				</h5>
        				heheheheheeheheh
        				
        				<input type="text" hidden />
        				
        			</div>
        		</div>
        	</div>
        </div>
        
        <!--
        	作者：hq15221892410@163.com
        	时间：2017-12-11
        	描述：名人名言
        -->
        <div class="container">
        	<blockquote class="blockquote">
        		<p class="mb-0">天地不仁以万物为刍狗</p>
        		<footer class="blockquote-footer">
        			如意<cite title="啥玩意">玉</cite>
        		</footer>
        	</blockquote>
        	
        	<img src="" class="img-fluid" alt="XXXXX" />
       
	        <div class="table">
	        	<table>
	        		<tbody class="table-dark">
	        			<tr>
	        			<td>TD1</td>
	        			<td>TD2</td>
	        			<td>TD3</td>
	        		</tr>
	        		<tr>
	        			<td>TD1</td>
	        			<td>TD2</td>
	        			<td>TD3</td>
	        		</tr>
	        		</tbody>
	        	</table>
	        </div>
         </div>
         
         <!--
         	作者：hq15221892410@163.com
         	时间：2017-12-11
         	描述：示例弹框不同样式
         -->
         <div class="container">
         	<figure class="figure">
         		<img class="figure-img img-fluid rounded" alt="tttt"/>
         		<figcaption class="figure-caption">ttts</figcaption>
         	</figure>
         	
         	<div class="alert alert-primary" role="alert">
         		T3
         	</div>
         	<div class="alert alert-secondary" role="alert">
         		T3
         	</div>
         	<div class="alert alert-success" role="alert">
         		T3
         	</div>
         	<div class="alert alert-danger" role="alert">
         		T3
         	</div>
         	<div class="alert alert-warning" role="alert">
         		T3
         	</div>
         	<div class="alert alert-info" role="alert">
         		T3
         	</div>
         	<div class="alert alert-light" role="alert">
         		T3
         	</div>
         	<div class="alert alert-dark" role="alert">
         		T3
         	</div>
         </div>
         
         <!--
         	作者：hq15221892410@163.com
         	时间：2017-12-11
         	描述：面包屑导航条
         -->
         <div class="container">
         	<nav aria-lable="breadcrumb">
         		<ol class="breadcrumb">
         			<li class="breadcrumb-item active" aria-current="page">Home</li>
         		</ol>
         	</nav>
         	
         	<nav aria-lable="breadcrumb">
         		<ol class="breadcrumb">
         			<li class="breadcrumb-item"><a href="#">Home</a></li>
         			<li class="breadcrumb-item active" aria-current="page">Home</li>
         		</ol>
         	</nav>
         	
         	<!--
             	作者：hq15221892410@163.com
             	时间：2017-12-11
             	描述：按钮组
             -->
         	<div class="btn-group" role="group" aria-label="base">
         		<button type="button" class="btn btn-secondary">left</button>
         		<button type="button" class="btn btn-secondary">center</button>
         		<button type="button" class="btn btn-secondary">right</button>
         	</div>
         	
         	
         	<div class="btn-toolbar" role="toolbar" aria-label="toolbar">
         		<div class="btn-group mr-2" role="group" aria-label="first group">
         			<button type="button" class="btn btn-secondary">1</button>
         			<button type="button" class="btn btn-secondary">2</button>
         			<button type="button" class="btn btn-secondary">3</button>
         		</div>
         		
         		<div class="btn-group mr-2" role="group" aria-label="first group">
         			<button type="button" class="btn btn-secondary">5</button>
         			<button type="button" class="btn btn-secondary">6</button>
         			<button type="button" class="btn btn-secondary">7</button>
         		</div>
         		
         		<div class="btn-group" role="group" aria-label="first group">
         			<button type="button" class="btn btn-secondary">9</button>
         		</div>
         	</div>
         	
         	<div>
         		<img src="img/3.jpg" class="rounded-circle" alt="sss"/>
         	</div>
         </div>
	</body>
</html>
